<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单验证</title>

  <style>
    *{
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
    }
    .cal1{
      width: 100%;
      height: 500px;
      background: url("../../html/image/13.jpg"),center;
      box-sizing: border-box;
      padding-top: 20px;
    }

    .cal2{
      width: 70%;
      height: 450px;
      border: 6px solid lightgray;
      background: white;
      margin: auto;
      padding: 15px;
    }

    .p1{
      font-size: 20px;
      color: lightpink;
    }

    .p2{
      font-size: 20px;
      color: gray;
    }
    .div01{
      float: left;
      margin: 10px;
    }

    .div02{
      width: 52%;
      float: left;
      margin-left: 5%;
    }
    table{
      margin: auto;
    }

    .div03{
      float: right;
      font-size: 14px;
      margin: 10px;
    }

    div a{
      color: deeppink;
    }

    .td-left{
      width: 20%;
      text-align: right;
      height: 45px;
    }
    .td-right{
      padding-left: 25px;
    }

    #username,#password,#email,#name,#tel,#birthday{
      width: 251px;
      height: 32px;
      border-color: lightgray;
      /*设置边框圆角*/
      border-radius: 5px;
      padding-left: 10px;
    }
    #checkcode{
      width: 120px;
      height: 32px;
      border-color: lightgray;
      /*设置边框圆角*/
      border-radius: 5px;
      padding-left: 5px;
    }
    #img_check{
      height: 32px;
      width: 100px;
      /*垂直居中*/
      vertical-align: middle;
    }
    #btn_sub{
      width: 150px;
      height: 30px;
      background-color: #98e7e7;
      border-radius: 5px;
      border-color: #98e7e7;
    }
    #btn{
      text-align: center;
    }
    .error{
      color: red;
    }
  </style>
  <script>
    /**
     * 分析：
     *    1.给表单绑定 onsubmit 事件。监听器中判断每一个方法校验的结果。
     *        如果都为 true，则监听器方法返回 true
     *        如果有一个为 false，则监听器方法返回 false
     *
     *    2.定义一些方法分别校验各个表单项。
     *
     *    3.给各个表单项绑定 onblur 事件。
     */

    window.onload = function (){
        //1.给表单绑定 onsubmit 事件
        document.getElementById("form").onsubmit = function () {
            //调用用户名校验方法   checkUsername();
            //调用密码校验方法    checkPassword();
            //return checkUsername() && checkPassword();
          return checkUsername() && checkPassword();
        }
        //给用户名和密码框分别绑定离焦事件
        document.getElementById("username").onblur = checkUsername;//一定是方法对象，不能带括号
        document.getElementById("password").onblur = checkPassword;//一定是方法对象，不能带括号
    }
    //校验用户名
    function checkUsername() {
        //1.获取用户名的值
        var username = document.getElementById("username").value;
        //2.定义正则表达式
        var reg_username = /^\w{6,12}$/;
        //3.判断值是否符合正则的规则
        var flag = reg_username.test(username);
        //4.提示信息
        var s_username = document.getElementById("s_username");
        if (flag) {
          //提示绿色对钩
          s_username.innerHTML = "<img  width='35px' height='25px' src='../../html/image2/3.png'>";
        } else {
          //提示红色用户名有误
          s_username.innerHTML = "用户名格式有误";
        }
        return flag;
    }

    function checkPassword() {
      //1.获取密码的值
      var password = document.getElementById("password").value;
      //2.定义正则表达式
      var reg_password = /^\w{6,12}$/;
      //3.判断值是否符合正则的规则
      var flag = reg_password.test(password);
      //4.提示信息
      var s_password = document.getElementById("s_password");
      if (flag) {
        //提示绿色对钩
        s_password.innerHTML = "<img width='35px' height='25px' src='../../html/image2/3.png'>";
      } else {
        //提示红色用户名有误
        s_password.innerHTML = "密码格式有误";
      }
      return flag;
    }

  </script>

</head>
<body>

<div class="cal1">
  <div class="cal2">
    <div class="div01">
      <p class="p1">新用户注册</p>
      <p class="p2">USER REGISTER</p>
    </div>

    <div class="div02">
      <form action="#" id="form" method="get">
        <table>
          <tr>
            <td class="td-left"><label for="username">用户名</label></td>
            <td class="td-right"><input name="username" placeholder="请输入用户名" id="username">
              <span id="s_username" class="error"></span></td>
          </tr>
          <tr>
            <td class="td-left"><label for="password">密码</label></td>
            <td class="td-right"><input name="password" type="password" placeholder="请输入密码" id="password">
              <span id="s_password" class="error"></span></td>
          </tr>
          <tr>
            <td class="td-left"><label for="email">Email</label></td>
            <td class="td-right"><input name="email" type="email" placeholder="请输入Email" id="email"></td>
          </tr>
          <tr>
            <td class="td-left"><label for="name">姓名</label></td>
            <td class="td-right"><input name="name" placeholder="请输入真实姓名" id="name"></td>
          </tr>
          <tr>
            <td class="td-left"><label for="tel">手机号</label></td>
            <td class="td-right"><input name="tel" placeholder="请输入您的手机号" id="tel"></td>
          </tr>
          <tr>
            <td class="td-left">性别</td>
            <td class="td-right"><input name="gender" type="radio" value="male" checked> 男
              <input name="gender" type="radio" value="female"> 女</td>
          </tr>
          <tr>
            <td class="td-left"><label for="birthday">出生日期</label></td>
            <td class="td-right"><input name="birthday" type="date" id="birthday"></td>
          </tr>
          <tr>
            <td class="td-left"><label for="checkcode">验证码</label></td>
            <td class="td-right"><input name="checkcode" id="checkcode" placeholder="请输入验证码"> <img id="img_check" src="../../html/image2/2.png"></td>
          </tr>
          <tr>
            <td colspan="2" id="btn"><input type="submit" value="注册" id="btn_sub"></td>
          </tr>
        </table>
      </form>
    </div>

    <div class="div03">
      <p>已有账号？<a href="#">立即登录</a></p>
    </div>
  </div>
</div>

</body>
</html>